<template>
  <div class="v-select-checkbox">
    <el-popover
      ref="popover1"
      trigger="click">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" v-if="!max">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
        <el-checkbox v-for="(city, index) in dataOptions" :label="city[labelText]" v-model="city.isSelect" :key="city[valueKey]" @change="handleCheckedOptionsChange(index)">{{ city[labelText] }}</el-checkbox>
    </el-popover>
    <el-button v-popover:popover1 style="max-width: 1000px;">
      <span v-if="closable" style="display: inline-block; line-height: 28px;">
        <span v-if="checkedOptions.length > 0">
          <el-tag
            v-if="tag.isSelect"
            v-for="(tag,index) in dataOptions"
            :key="tag[valueKey]"
            @close="close(index)"
            closable size="mini">
            {{ tag[labelText] }}
          </el-tag>
        </span>
        <span  v-if="checkedOptions.length === 0">
          请选择
        </span>
        <i class="el-icon-caret-bottom"></i>
      </span>
      <template v-else>
        <span v-if="checkedOptions.length === 0">请选择</span>
        <span v-if="checkedOptions.length > 0"> 选中{{ checkedOptions.length }}</span>
        <i class="el-icon-caret-bottom"></i>
      </template>
    </el-button>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      // 最多选几个
      max: {
        type: Number
      },
      options: {
        type: Array
      },
      // 显示的文字
      labelText: {
        type: String,
        default: 'label'
      },
      // 值
      valueKey: {
        type: String,
        default: 'value'
      },
      resultType: {
        type: String,
        default: 'value'
      },
      // 是否可以关闭
      closable: false
    },
    data () {
      return {
        checkAll: false,
        checkedOptions: [ ],
        dataOptions: this.options,
        isIndeterminate: false
      }
    },
    watch: {
      checkedOptions: {
        handler: function () {
          let result = this.checkedOptions.map((item) => {
            if (this.resultType === 'value') {
              return item[this.valueKey]
            } else {
              return item
            }
          })
          this.$emit('change', result)
        },
        deep: true
      }
    },
    methods: {
      close (index) {
        this.dataOptions[index].isSelect = false
        this.handleCheckedOptionsChange()
      },
      handleCheckAllChange (val) {
        if (val) {
          this.dataOptions = this.dataOptions.map((item) => {
            item.isSelect = true
            return item
          })
        } else {
          this.dataOptions = this.dataOptions.map((item) => {
            item.isSelect = false
            return item
          })
        }
       this.handleCheckedOptionsChange()
        this.isIndeterminate = false
      },
      handleCheckedOptionsChange (index) {
        this.checkedOptions = this.dataOptions.filter((item) => {
          return item.isSelect === true
        })
        if (this.checkedOptions.length - 1 === this.max) {
          this.dataOptions[index].isSelect = false
          return
        }
        let checkedCount = this.checkedOptions.length
        this.checkAll = checkedCount === this.dataOptions.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataOptions.length
      }
    },
    created () {
      this.dataOptions = this.options.map((item) => {
        item['isSelect'] = false
        return item
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .v-select-checkbox
    .el-button
      padding 0 10px
      height 30px
      .el-tag--mini[data-v-5bad4165]
        margin 4px 5px
  .el-checkbox+.el-checkbox
    margin 10px 0
  .el-checkbox
    display block
  .el-tag--mini
    margin 5px;
    display block
    float left
</style>
